<template>
  <div>
    <!-- 查询 -->
    <a-row>
      <a-col :span="6">
        <a-form-item label="药品名称" :wrapper-col="{ span: 16 }" name="name">
          <a-input
            v-model:value="queryData.drugsName"
            placeholder="请输入药品名称"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="制造商" :wrapper-col="{ span: 16 }" name="userName">
          <a-input
            v-model:value="queryData.manufacturer"
            placeholder="请输入药品制造商"
          />
        </a-form-item>
      </a-col>
      <a-col :span="6"> </a-col>
      <a-col :span="6">
        <a-button @click="reset" style="margin-left: 20px">重置</a-button>
        <a-button
          @click="selectDrugs"
          style="margin: 0 20px; background-color: #6a2c70"
          type="primary"
          >查询</a-button
        >
        <a-button
          v-if="userInfo.empId == 0"
          @click="openDrawer(null)"
          type="primary"
          style="background-color: #b83b5e"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          新增药品</a-button
        >
      </a-col>
    </a-row>

    <!-- 表格 -->
    <a-table
      :loading="isloading"
      :pagination="pagination"
      :columns="columns"
      :data-source="drugsList.data"
      tableLayout="fixed"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'drugsName'">
          <a-tooltip>
            <template #title>{{ record.drugsName }}</template>
            <div class="hidden">{{ record.drugsName }}</div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'manufacturer'">
          <a-tooltip>
            <template #title>{{ record.manufacturer }}</template>
            <div class="hidden">{{ record.manufacturer }}</div>
          </a-tooltip>
        </template>

        <template v-if="column.key === 'price'">
          ￥{{ record.price }}
        </template>
        <template v-if="column.key === 'strength'">
          <a-tooltip>
            <template #title>{{ record.strength }}</template>
            <div class="hidden">{{ stringSlicing(record.strength) }}</div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'expirationDate'">
          <a-tooltip>
            <template #title>{{ record.expirationDate }}</template>
            <div class="hidden">{{ stringSlicing(record.expirationDate) }}</div>
          </a-tooltip>
        </template>

        <template v-if="column.key === 'action'">
          <div v-if="userInfo.empId == 0">
            <a-button
              type="primary"
              @click="openDrawer(record.drugsId)"
              style="margin-right: 20px; background-color: #f5b017"
              >编辑</a-button
            >
            <a-popconfirm
              title="确认删除此药品吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="deleteDrugs(record.drugsId)"
            >
              <a-button type="primary" style="background-color: #f38181" danger
                >删除</a-button
              >
            </a-popconfirm>
          </div>
          <div v-else>没有权限对此操作</div>
        </template>
      </template>
    </a-table>

    <!-- 抽屉 -->
    <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      :title="drawerTitle"
      placement="right"
      width="60%"
      :maskClosable="false"
    >
      <DrugsDrawer v-if="open" :drugsId="drugsId" @receiveData="receiveData" />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { userUserStore } from '@/stores/UserStore'
import DrugsDrawer from './drugsDrawer.vue'
import { ref, reactive, onMounted } from 'vue'
import { PaginationModel } from '@/api/config/Model'
import { columns } from './columns'
import { QueryData } from '@/api/Drugs/model'
import { apiList, apiDeleteDrugs } from '@/api/Drugs/api'
import { message } from 'ant-design-vue'
const drugsId = ref<null | number>(null)
const queryData = reactive<QueryData>({
  manufacturer: '',
  drugsName: '',
  page: 1,
  pageSize: 10,
})
const open = ref<boolean>(false)
const drawerTitle = ref<string>('新增药品')
const isloading = ref<boolean>(false)
const drugsList = reactive({
  data: [],
})
const store = userUserStore()
const userInfo: any = ref({})

const pagination = ref<PaginationModel>({
  current: 1,
  total: 100,
  pageSize: 10, //每页中显示10条数据
  pageSizeOptions: ['10', '20', '30'],
})
//删除药品
const deleteDrugs = async (drugsId: number) => {
  await apiDeleteDrugs(drugsId)
  message.success('删除成功！')
  getDrugList()
}

const selectDrugs = () => {
  getDrugList()
}

const reset = () => {
  Object.keys(queryData).forEach((key) => delete queryData[key])
  queryData.page = 1
  queryData.pageSize = 10
  getDrugList()
}
//打开弹出框
const openDrawer = (type: number | null) => {
  open.value = true

  if (type == null) {
    drugsId.value = 0
    //新增
    drawerTitle.value = '新增药品'
  } else {
    //修改
    drugsId.value = type
    drawerTitle.value = '修改药品'
  }
}

// 分页改变
const handleTableChange = (page: any) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  queryData.page = page.current
  queryData.pageSize = page.pageSize
  getDrugList()
}
//接受抽屉传递过来的数据
const receiveData = (type: number) => {
  if (type == 1) {
    message.success('修改成功')
  } else if (type == 3) {
    message.success('添加成功')
  } else if (type == 2) {
    message.error('修改失败')
  } else {
    message.error('添加失败')
  }
  getDrugList()
  drugsId.value = null
  open.value = false
}

const stringSlicing = (str: string) => {
  return str.split('T')[0]
}
//获取药品列表
const getDrugList = async () => {
  isloading.value = true
  try {
    let res = await apiList(queryData)
    drugsList.data = res.data.records

    pagination.value.current = res.data.current
    pagination.value.pageSize = res.data.size
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取药品列表失败')
  }
  isloading.value = false
}

onMounted(() => {
  //如果不是超级管理员就对社区id进行固定
  userInfo.value = store.employeeInfo

  getDrugList()
})
</script>

<style lang="less" scoped>
.hidden {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
